<template>
    <div class="el-form">
      <div class="img-box-wrapper">
        <el-upload
        ref="uploadRef"
          v-loading="loading"
          list-type="picture-card"
          :headers="myHeaders"
          :limit="limitNum"
          action="#"
          :file-list="pics"
          :on-remove="handleRemove"
          :http-request="handleUploadForm"
          :on-exceed="handleExceed"
          :show-file-list="isShow"
          :disabled="pics.length>5"
          :before-upload="beforeUpload"
          :on-change="handleEditChange"
          :on-error="handleError"
          :class="{hide:hideUploadEdit}">
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
</template>

<script>
  import { Debounce } from '@/utils/validate.js'
    export default {
        name: "upload",
      data() {
          return {
            myHeaders: {},
            pics: [],
            upLoadUrl: process.env.BASE_URL + "/api/front/upload/image",
            hideUploadEdit:false,
            loading:false
          }
      },
      props: {
        limitNum: {
          type: Number,
          default: 5
        },
        isShow: {
          type: Boolean,
          default: true
        }
      },
      methods: {
        handleExceed() {
          this.$message.warning(this.$t(`message.tips.upPic`));
        },
        // 上传
        handleUploadForm(param) {
          const formData = new FormData();
          formData.append('multipart', param.file);
          this.loading = true
          this.$axios
            .post("/api/front/upload/image?model=product&pid=1", formData)
            .then((res) => {
              this.pics.push({name:res.data.fileName,url:res.data.url});
              this.$emit('picList', this.isShow ? this.pics : res.data.url)
              this.loading = false
            }).catch(()=>{
              this.loading = false
              this.pics = this.pics.filter(file => file !== param.file);
            })
        },
        beforeUpload: Debounce(function(file) {
          const isImage = file.type === "image/jpeg" || file.type === "image/png";
          if (!isImage) {
            this.$message.error(this.$t(`message.tips.picTips`));
          }
          return isImage;
        }),
        handleEditChange(file, fileList) {
          this.hideUploadEdit = fileList.length >= 5
        },
        handleRemove(file, fileList) {
          this.pics = [];
          fileList.forEach(item => {
            this.pics.push(item);
          });
          this.hideUploadEdit = false;
          this.$emit('picList', this.pics)
        },
        handleError(err, file, fileList){
          console.log(err, file, fileList)
        }
      }
    }
</script>

<style scoped lang="scss">
  .el-form{
    ::v-deep.el-upload--picture-card {
      width: 100px;
      height: 100px;
      border-style: solid;
      line-height: 100px;
    }
  }
  .img-box-wrapper {
    display: flex;
    flex-wrap: wrap;
    ::v-deep.el-upload-list--picture-card .el-upload-list__item{
      width: 100px;
      height: 100px;
    }
    .img-item {
      position: relative;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      margin-bottom: 12px;
      border: 1px solid #c0ccda;
      border-radius: 6px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
      .icon {
        position: absolute;
        right: -10px;
        top: -8px;
        font-size: 20px;
        cursor: pointer;
        color: #00785E;
      }
    }
  }
  ::v-deep .hide .el-upload--picture-card {
    display: none;
  }
</style>
